<template>
  <div class="systemPage-wrapper">
    <div class="topbar">
      <span class="icon iconfont iconxitongpingtai-caidanguanli"></span>
      <span>菜单管理</span>
    </div>
    <div class="content-background">
      <div class="left-tree content-wrapper">
        <span class="title">菜单选择</span>
        <menu-tree ref="menuTree" :type="0" :dropMenuShow="1" :dropMenuList="dropMenu" :param="param"
          @getNodeInfo="getMenuInfo" @menuOperations="menuOperations"></menu-tree>
      </div>
      <div class="right-board content-wrapper" v-if="menuShow">
        <div class="title-wrapper">
          <span class="title">菜单管理</span>
          <span class="systemButtonConfirm" @click="menuFormSave">保存</span>
        </div>
        <div class="menuDetail">
          <el-form class="systemForm" ref="menuForm" :model="menuForm" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="菜单名称：">
                  <el-input class="systemInput" v-model="menuForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="可用状态：">
                  <el-select class="systemInput" v-model="menuForm.state">
                    <el-option v-for="item in stateMap" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="菜单编码：">
                  <el-input class="systemInput" v-model="menuForm.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="菜单图标：">
                  <el-input class="systemInput" v-model="menuForm.icon"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="关联表单：" class="inline-row">
                  <el-input class="systemInput" v-model="menuForm.wpClassName" clearable
                    @clear="clearId('wp')"></el-input>
                  <i class="el-icon-more" @click="relevantDialog"></i>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关联窗体：" class="inline-row">
                  <el-input class="systemInput" v-model="menuForm.formName" clearable @clear="clearId('fn')"></el-input>
                  <i class="el-icon-more" @click="relevantWindowDialog(1)"></i>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="输入参数：">
                  <el-input class="systemInput" v-model="menuForm.params"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="应用类型：" class="inline-row">
                  <el-input class="systemInput" v-model="menuForm.typeName"></el-input>
                  <i class="el-icon-more" @click="handleFuncApp"></i>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="关联流程：" class="inline-row">
                  <el-input class="systemInput" v-model="menuForm.wfClassName" clearable
                    @clear="clearId('wf')"></el-input>
                  <i class="el-icon-more" @click="wfDialogShow"></i>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="忽略权限：">
                  <el-select class="systemInput" v-model="menuForm.ignoreAut">
                    <el-option v-for="item in ignoreAutMap" :key="item.value" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据库表：">
                  <el-input class="systemInput" v-model="menuForm.tableName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="新增接口：">
                  <el-input class="systemInput" v-model="menuForm.doNew"></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="新增页面：">
                  <el-input class="systemInput" v-model="newAddress"></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="12">
                <el-form-item label="自定义路由：">
                  <el-input class="systemInput" v-model="menuForm.wmName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="自定义页面：">
                  <el-input class="systemInput" v-model="menuForm.pagePath1"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注：">
              <el-input class="systemInput" resize="none" type="textarea" rows="4" placeholder="请输入内容"
                v-model="menuForm.note"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="roles-wrapper">
          <div class="roles-top">
            <span class="title">菜单权限</span>
            <div class="buttons-wrapper">
              <span class="systemButtonAdd" @click="autsBatchAdd">批量新增</span>
              <span class="systemButtonAdd" @click="autAdd">新增</span>
              <span class="systemButtonEdit" @click="autEdit">编辑</span>
              <span class="systemButtonDelete" @click="autDelete">删除</span>
            </div>
          </div>
          <div class="roles-bottom">
            <el-checkbox-group v-model="checkedAuts">
              <el-checkbox class="systemCheckbox" v-for="(item, i) in menuForm.autList" :label="item" :key="i">{{
                item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <!-- 路径&菜单弹窗 -->
    <div class="maskCenter" v-if="dialogFormVisible">
      <div class="systemDialog" style="width: 473px;height: 329px;">
        <div class="dialog-header" v-winmove>
          <span>{{ dialogFormTitle }}</span>
        </div>
        <div class="dialog-body">
          <el-form :model="dialogForm" class="systemForm">
            <el-form-item label="名称:" label-width="50px">
              <el-input class="systemInput" v-model="dialogForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="编码:" label-width="50px">
              <el-input class="systemInput" v-model="dialogForm.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态:" label-width="50px">
              <el-select class="systemInput" v-model="dialogForm.state">
                <el-option v-for="item in stateMap" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="dialogFormSave">保存</span>
          <span class="systemButtonCancel" @click="dialogFormCancel">取消</span>
        </div>
      </div>
    </div>
    <!-- 菜单权限弹窗 -->
    <div class="maskCenter" v-if="autFormVisible">
      <div class="systemDialog" style="width: 473px;height: 400px;">
        <div class="dialog-header" v-winmove>
          <span>{{ autFormTitle }}</span>
        </div>
        <div class="dialog-body">
          <el-form class="systemForm" :model="autForm">
            <el-form-item label="名称:" label-width="50px">
              <el-input class="systemInput" v-model="autForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="编码:" label-width="50px">
              <el-input class="systemInput" v-model="autForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="autFormSave">保存</span>
          <span class="systemButtonCancel" @click="autFormCancel">取消</span>
        </div>
      </div>
    </div>
    <!-- 关联表单弹窗 -->
    <div class="maskCenter" v-if="relevantDialogVisible">
      <div class="systemDialog checkDialog" style="width: 665px; height: 546px;">
        <div class="dialog-header" v-winmove>
          <span>关联表单</span>
        </div>
        <div class="dialog-body">
          <el-input placeholder="请输入表单名称" class="systemInput" v-model="searchName" @change="relevantDialogSearch">
            <el-button slot="append" icon="el-icon-search" @click="relevantDialogSearch"></el-button>
          </el-input>
          <el-checkbox-group v-model="checkedList" @change="handleCheckedFormsChange">
            <el-checkbox class="systemCheckbox" v-for="item in relevantDialogList" :label="item" :key="item.id">{{
              item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="relevantDialogSave">确定</span>
          <span class="systemButtonCancel" @click="relevantDialogCancel">取消</span>
        </div>
      </div>
    </div>
    <!-- 关联流程弹窗 -->
    <div class="maskCenter" v-if="relevantWfVisible">
      <div class="systemDialog checkDialog" style="width: 665px; height: 546px;">
        <div class="dialog-header" v-winmove>
          <span>关联流程</span>
        </div>
        <div class="dialog-body">
          <el-input placeholder="请输入流程名称" class="systemInput" v-model="searchName" @change="relevantDialogSearch(2)">
            <el-button slot="append" icon="el-icon-search" @click="relevantDialogSearch(2)"></el-button>
          </el-input>
          <el-checkbox-group v-model="checkedList" @change="handleWindowCheck($event, 2)">
            <el-checkbox class="systemCheckbox" v-for="item in relevantWfList" :label="item.id" :key="item.id">{{
              item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="relevantWfSave">确定</span>
          <span class="systemButtonCancel" @click="relevantDialogCancel">取消</span>
        </div>
      </div>
    </div>
    <!-- 应用类型详情弹窗 -->
    <div class="maskCenter" v-if="funcAppDetailShow">
      <div class="systemDialog funcAppDialog">
        <div class="dialog-header" v-winmove>
          <span>应用类型</span>
          <span class="icon iconfont iconbiaoqianlan-guanbi" @click="funcAppDetailShow = false"></span>
        </div>
        <div class="dialog-body">
          <span class="systemButtonAdd" @click="funcAppEdit(0)">新增</span>
          <el-table class="systemTable" :data="tableData" stripe>
            <el-table-column prop="typeName" label="应用类型" show-overflow-tooltip width="80"></el-table-column>
            <el-table-column prop="state" label="是否启用" align="center" show-overflow-tooltip width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.state ? '是' : '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="wpName" label="关联表单" show-overflow-tooltip></el-table-column>
            <el-table-column prop="path" label="关联路径" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="160">
              <template slot-scope="scope">
                <div class="row edit" @click.stop="funcAppEdit(scope.row)">
                  <span class="icon iconfont iconbiaoge-bianji" style="color: rgba(64, 158, 255, 1);"></span>
                  <span>编辑</span>
                </div>
                <div class="row delete" @click.stop="funcAppDelete(scope.row)">
                  <span class="icon iconfont iconbiaoge-shanchu" style="color: rgba(249, 73, 99, 1);"></span>
                  <span>删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 应用类型新增&编辑弹窗 -->
    <div class="maskCenter" v-if="funcAppShow">
      <div class="systemDialog handleFuncAppDialog">
        <div class="dialog-header" v-winmove>
          <span>{{ funcAppTitle }}</span>
        </div>
        <div class="dialog-body">
          <el-form class="systemForm" :model="funcAppDetail">
            <el-form-item label="应用类型:" label-width="80px">
              <el-select class="systemInput" v-model="funcAppDetail.typeId"
                :disabled="Boolean(funcAppDetail.id) || funcAppDetail.id == 0">
                <el-option v-for="item in funcAppTypeMap" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否启用:" label-width="80px">
              <el-select class="systemInput" v-model="funcAppDetail.state">
                <el-option v-for="item in funcAppStateMap" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联表单:" label-width="80px">
              <el-input class="systemInput" v-model="funcAppDetail.wpName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="关联路径:" label-width="80px" class="inline-row">
              <el-input class="systemInput" v-model="funcAppDetail.path" autocomplete="off"></el-input>
              <i class="el-icon-more" @click="relevantWindowDialog()"></i>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="funcAppDialogSave">确定</span>
          <span class="systemButtonCancel" @click="funcAppDialogCancel">取消</span>
        </div>
      </div>
    </div>
    <!-- 关联窗体弹窗 -->
    <div class="maskCenter" v-if="relevantWindowShow">
      <div class="systemDialog checkDialog" style="width: 665px; height: 546px;;">
        <div class="dialog-header" v-winmove>
          <span>关联窗体</span>
        </div>
        <div class="dialog-body">
          <el-input placeholder="请输入窗体名称" class="systemInput" v-model="searchName" @change="relevantDialogSearch(1)">
            <el-button slot="append" icon="el-icon-search" @click="relevantDialogSearch(1)"></el-button>
          </el-input>
          <el-checkbox-group v-model="checkedWindow" @change="handleWindowCheck">
            <el-checkbox class="systemCheckbox" v-for="item in windowList" :label="item.id" :checked="item.checked"
              :key="item.id">{{ item.text }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="relevantWindowSave">确定</span>
          <span class="systemButtonCancel" @click="relevantWindowCancel">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MenuTree from '@/system/components/menuTree'
import {
  menuDetail,
  menuSave,
  menuDelete,
  batchAdd,
  autSave,
  autDelete,
  queryList,
  getAppType,
  funcAppSave,
  funcAppDelete,
  funcAppList,
  funcDown,
  funcUp
} from '@/system/api/menuManage'
import { pageQuery } from '@/system/api/customPage'
import winmove from '@/directives/winmove'
import { workflowclassquery, workflowclassdetail } from '@/system/api/flowManage'

export default {
  data() {
    return {
      newAddress: '',
      param: {
        parentId: 0,
      },
      // menu
      menuShow: false,
      menuForm: {},
      stateMap: [
        { value: 0, label: '不可用' },
        { value: 1, label: '可用' },
      ],
      ignoreAutMap: [
        { value: 0, label: '否' },
        { value: 1, label: '是' },
      ],
      // 树 左击信息
      currentMenuNodeId: '',
      // 树 右击信息
      currentNode: {},
      currentNodeInfo: {},
      // 右键菜单
      dropMenu: [],
      operationType: '',
      // 路由
      dialogFormVisible: false,
      dialogFormTitle: '',
      dialogForm: {},
      // 权限
      checkedAuts: [],
      autFormVisible: false,
      autForm: {},
      autFormTitle: '新增权限',
      // 表单&窗口
      relevantDialogVisible: false,
      relevantDialogList: [],
      checkedList: [],
      searchName: '',
      windowList: [],
      relevantWindowShow: false,
      checkedWindow: [],
      // 应用类型
      funcAppDetail: {},
      funcAppShow: false,
      funcAppTitle: '新增应用',
      funcAppTypeMap: [],
      funcAppStateMap: [
        { value: 1, label: '是' },
        { value: 0, label: '否' },
      ],
      funcAppDetailShow: false,
      tableData: [],
      // 关联流程
      relevantWfVisible: false,
      relevantWfList: []
    }
  },
  components: {
    MenuTree,
  },
  directives: {
    winmove,
  },
  created() {
    getAppType({ name: '应用类型' }).then((res) => {
      if (res.success) {
        this.funcAppTypeMap = res.info
      }
    })
  },
  mounted() {
  },
  methods: {
    handleCheckedFormsChange(val) {
      if (val.length > 1) {
        val = val.splice(1, 1);
      }
      this.checkedList = val ? val : [];
    },
    // 菜单树点击
    async getMenuInfo(e) {
      let menuId = ''
      if (e.clickType) {
        if (e.type) {
          this.menuInitialize(e.id)
          this.currentMenuNodeId = e
          this.menuShow = true
        } else {
          this.menuShow = false
        }
      } else {
        this.dropMenu = e.data.type
          ? [
            {
              index: 3,
              label: '删除',
              icon: 'icon iconfont iconbiaoge-shanchu',
            },
            {
              index: 4,
              label: '上移',
            },
            {
              index: 5,
              label: '下移',
            },
          ]
          : [
            {
              index: 0,
              label: '新增路径',
              icon: 'icon iconfont iconzengjia',
            },
            {
              index: 1,
              label: '新增菜单',
              icon: 'icon iconfont iconzengjia',
            },
            {
              index: 2,
              label: '编辑',
              icon: 'icon iconfont iconbiaoge-bianji',
            },
            {
              index: 3,
              label: '删除',
              icon: 'icon iconfont iconbiaoge-shanchu',
            },
          ]
        this.currentNode = e
        const detail = await menuDetail({ id: e.data.id })
        console.log('e', e);
        this.currentNodeInfo = detail.info
        console.log('detail', detail);
      }
    },
    // 菜单初始化
    async menuInitialize(id) {
      menuDetail({ id: id }).then((res) => {
        if (res.success) {
          this.menuForm = JSON.parse(JSON.stringify(res.info))
        } else this.message(res.msg, 3)
      })
      const detail = await funcAppList({ funcId: id })
      this.tableData = JSON.parse(JSON.stringify(detail.info))
    },
    // 菜单树右键菜单
    menuOperations(e) {
      // 0-新增路径 1-新增菜单 2-编辑 3-删除
      this.dialogFormTitle = ''
      this.dialogForm = {}
      this.operationType = e
      switch (Number(e)) {
        case 0:
          this.dialogFormVisible = true
          this.dialogFormTitle = '新增路径'
          this.dialogForm = {
            type: 0,
            state: 1,
            parentId: this.currentNodeInfo.id,
          }
          break
        case 1:
          this.dialogFormVisible = true
          this.dialogFormTitle = '新增菜单'
          this.dialogForm = {
            type: 1,
            state: 1,
            parentId: this.currentNodeInfo.id,
          }
          console.log('parentId', this.currentNodeInfo.id);
          break
        case 2:
          if (!this.currentNodeInfo.type) {
            this.dialogFormVisible = true
            this.dialogFormTitle = '编辑路由'
            this.dialogForm = JSON.parse(
              JSON.stringify(this.currentNodeInfo)
            )
          } else {
            let datas = JSON.parse(
              JSON.stringify(this.currentNodeInfo)
            )
            this.menuForm = datas
          }
          break
        case 3:
          this.messageBox('确认删除？').then((c) => {
            if (c.action) {
              menuDelete({ id: this.currentNodeInfo.id }).then(
                (res) => {
                  if (res.success) {
                    this.currentNode.operationType = 0
                    this.$refs.menuTree.refreshNode(
                      this.currentNode
                    )
                    this.message(res.msg, 1)
                  } else this.message(res.msg, 3)
                }
              )
            }
          })
          break
        case 4:
          funcUp({ id: this.currentNodeInfo.id }).then(res => {
            if (res.success) {
              this.currentNode.operationType = 0
              this.$refs.menuTree.refreshNode(
                this.currentNode
              )
              this.message(res.msg, 1)
            } else this.message(res.msg, 3)
          })
          break
        default:
          funcDown({ id: this.currentNodeInfo.id }).then(res => {
            if (res.success) {
              this.currentNode.operationType = 0
              this.$refs.menuTree.refreshNode(
                this.currentNode
              )
              this.message(res.msg, 1)
            } else this.message(res.msg, 3)
          })
          break
      }
    },
    // 路由保存
    dialogFormSave() {
      if (!this.dialogForm.name) {
        this.message('请输入名称', 3)
        return
      }
      if (this.operationType === 2 || this.operationType === 3) {
        this.currentNode.operationType = 0
      } else this.currentNode.operationType = 1
      // this.dialogForm.wmName = this.newAddress
      menuSave(this.dialogForm).then((res) => {
        if (res.success) {
          if (!this.dialogForm.id) {
            this.currentNode.highLightId = res.info
          } else {
            this.currentNode.highLightId = this.currentNodeInfo.id
          }
          this.$refs.menuTree.refreshNode(this.currentNode)
          this.dialogFormVisible = false
          if (this.dialogForm.type) {
            this.menuShow = true
            menuDetail({ id: res.info }).then((res) => {
              if (res.code == 200) {
                if (res.success)
                  this.menuForm = JSON.parse(
                    JSON.stringify(res.info)
                  )
                else this.message(res.msg, 3)
              } else this.message(res.msg, 3)
            })
          } else this.menuShow = false
          this.message(res.msg, 1)
        } else this.message(res.msg, 3)
      })
    },
    // 路由取消
    dialogFormCancel() {
      let warningText = this.dialogForm.id
        ? '确认取消编辑？'
        : '确认取消新增？'
      this.messageBox(warningText).then((c) => {
        if (c.action) {
          this.dialogFormVisible = false
        }
      })
    },
    // 菜单关联表单
    async relevantDialog() {
      this.relevantDialogVisible = true
      this.searchName = ''
      this.checkedList = []
      this.relevantDialogList = await this.relevantQuery()
    },
    // 菜单关联流程
    async wfDialogShow() {
      this.searchName = ''
      this.relevantWfList = await this.relevantWf()
      this.checkedList = []
      if (this.menuForm.wfClassId) {
        this.checkedList.push(this.menuForm.wfClassId)
      }
      this.relevantWfVisible = true
    },
    relevantWf(name) {
      return workflowclassquery({ content: name }).then((res) => {
        if (res.success) {
          return res.info
        } else this.message(res.msg, 3)
      })
    },
    async relevantDialogSearch(type) {
      if (type === 1) { // 窗体
        const pageList = await pageQuery({
          customPage: { text: this.searchName },
          pageSize: 0,
          pageIndex: 0
        })
        this.windowList = pageList.info
      } else if (type === 2) { // 流程
        this.relevantWfList = await this.relevantWf(this.searchName)
      } else { // 表单
        this.relevantQuery(this.searchName).then((res) => {
          this.relevantDialogList = res;
        })
      }
    },
    relevantQuery(name) {
      return queryList({ name: name }).then((res) => {
        if (res.success) {
          return res.info
        } else this.message(res.msg, 3)
      })
    },
    relevantDialogCancel() {
      this.relevantDialogVisible = false
      this.relevantWfVisible = false
      this.checkedList = []
    },
    relevantDialogSave() {
      if (this.checkedList.length === 0) {
        this.message('请选择关联表单', 3)
        return
      } else {
        let ids = this.checkedList[0].id
        let names = this.checkedList[0].name
        for (let i = 1; i < this.checkedList.length; i++) {
          ids = ids + ',' + this.checkedList[i].id
          names = names + ',' + this.checkedList[i].name
        }
        this.menuForm.repClassId = ids
        this.menuForm.wpClassName = names
        this.relevantDialogVisible = false
      }
    },
    relevantWfSave() {
      this.relevantWfVisible = false
    },
    //  电脑关联窗体&手机关联路径
    relevantWindowDialog(type) {
      this.relevantWindowShow = true
      this.searchName = ''
      this.checkedList = []
      pageQuery({
        customPage: {
          type: type
        },
        pageSize: 0,
        pageIndex: 0
      }).then((res) => {
        this.windowList = res.info
        for (let i = 0; i < this.windowList.length; i++) {
          this.$set(this.windowList[i], 'checked', false)
          if (this.menuForm.formName == this.windowList[i].text) {
            this.checkedWindow = []
            this.checkedWindow.push(this.windowList[i].id)
          }
        }
        // for (let i = 0; i < this.windowList.length; i++) {
        //   this.$set(this.windowList[i], 'checked', false)
        // }
      })
    },
    // 窗体&流程勾选
    async handleWindowCheck(e, a) {
      if (e.length > 1) { // 单选
        e.splice(0, 1);
      }
      if (a === 2) { // 流程
        if (e[0]) {
          const detail = await workflowclassdetail({ id: e[0] })
          this.menuForm.wfClassName = detail.info.name
          this.menuForm.wfClassId = detail.info.id
        } else {
          this.menuForm.wfClassName = null
          this.menuForm.wfClassId = null
        }
      }
    },
    // 关联窗体保存
    relevantWindowSave() {
      if (this.checkedWindow.length === 0) {
        this.message('请选择关联窗体', 3)
        return
      } else {
        if (this.funcAppDetailShow) {
          // 手机关联路径
          this.funcAppDetail.path =
            '/page/show?id=' +
            this.checkedWindow[0] +
            '&menuId=' +
            this.menuForm.id
        } else {
          // 电脑关联窗体
          for (let i = 0; i < this.windowList.length; i++) {
            if (this.windowList[i].id === this.checkedWindow[0]) {
              this.menuForm.formName = this.windowList[i].text
              this.menuForm.wmName =
                '/templatePage/' + this.windowList[i].id
            }
          }
        }
        this.relevantWindowShow = false
      }
    },
    relevantWindowCancel() {
      this.relevantWindowShow = false
      this.windowList = []
    },
    // 菜单保存
    menuFormSave() {
      menuSave(this.menuForm).then((res) => {
        if (res.success) {
          let node = this.$refs.menuTree.$refs.tree.getNode(
            this.currentMenuNodeId
          )
          node.operationType = 0
          this.$refs.menuTree.refreshNode(node)
          this.message(res.msg, 1)
        } else {
          this.message(res.msg, 3)
        }
      })
    },
    // 菜单权限批量新增
    autsBatchAdd() {
      batchAdd({ funcId: this.menuForm.id }).then((res) => {
        if (res.success) {
          this.message(res.msg, 1)
          this.menuInitialize(this.menuForm.id)
        } else this.message(res.msg, 3)
      })
    },
    // 菜单权限新增
    autAdd() {
      this.autFormTitle = '新增权限'
      this.autForm = {}
      this.autFormVisible = true
    },
    // 菜单权限编辑
    autEdit() {
      if (this.checkedAuts.length === 0) {
        this.message('请选择需要编辑的权限', 3)
        return
      } else if (this.checkedAuts.length > 1) {
        this.message('不能同时编辑多个权限', 3)
        return
      } else {
        this.autFormTitle = '编辑权限'
        this.autForm = JSON.parse(JSON.stringify(this.checkedAuts[0]))
        this.autFormVisible = true
      }
    },
    // 菜单权限删除
    autDelete() {
      if (this.checkedAuts.length === 0) {
        this.message('请选择需要删除的权限', 3)
        return
      } else {
        this.messageBox('确认删除？').then((c) => {
          if (c.action) {
            let ids = this.checkedAuts[0].id
            for (let i = 1; i < this.checkedAuts.length;) {
              // 删除多个,后台暂时不支持
              ids = ids + ',' + this.checkedAuts[i].id
              i++
            }
            autDelete({ ids: ids }).then((res) => {
              if (res.success) {
                this.message(res.msg, 1)
                this.checkedAuts = []
                this.menuInitialize(this.menuForm.id)
              } else this.message(res.msg, 3)
            })
          }
        })
      }
    },
    // 菜单权限取消操作
    autFormCancel() {
      let warningText = this.autForm.id
        ? '确认取消编辑？'
        : '确认取消新增？'
      this.messageBox(warningText).then((c) => {
        if (c.action) {
          this.autFormVisible = false
          this.autForm = {}
        }
      })
    },
    // 菜单权限保存操作
    autFormSave() {
      if (!this.autForm.name) {
        this.message('请输入权限名称', 3)
        return
      }
      let params = JSON.parse(JSON.stringify(this.autForm))
      if (!params.id) {
        params.type = 1
        params.funcId = this.menuForm.id
      }
      autSave(params).then((res) => {
        if (res.success) {
          this.message(res.msg, 1)
          this.autFormVisible = false
          this.menuInitialize(this.menuForm.id)
        } else this.message(res.msg, 3)
      })
    },
    // 应用类型操作
    handleFuncApp() {
      this.funcAppDetailShow = true
    },
    // 应用操作保存
    funcAppDialogSave() {
      let datas = {
        funcId: this.menuForm.id,
        typeId: this.funcAppDetail.typeId,
        state: this.funcAppDetail.state,
        path: this.funcAppDetail.path,
        id: this.funcAppDetail.id,
        wpName: this.funcAppDetail.wpName,
      }
      funcAppSave(datas).then((res) => {
        if (res.success) {
          this.funcAppShow = false
          this.menuInitialize(this.menuForm.id)
          this.message(res.msg, 1)
        } else {
          this.message(res.msg, 3)
        }
      })
    },
    // 应用操作取消
    funcAppDialogCancel() {
      this.funcAppShow = false
      this.funcAppDetail = {}
    },
    // 应用类型新增&编辑
    funcAppEdit(e) {
      if (!e) {
        this.funcAppDetail = { typeId: 7, state: 1 }
        this.funcAppTitle = '新增应用'
      } else {
        this.funcAppDetail = JSON.parse(JSON.stringify(e))
        this.funcAppTitle = '编辑应用'
      }
      this.funcAppShow = true
    },
    // 应用类型删除
    funcAppDelete(e) {
      this.messageBox('确认删除？').then((c) => {
        if (c.action) {
          funcAppDelete({ ids: e.id }).then((res) => {
            if (res.success) {
              this.menuInitialize(this.menuForm.id)
              this.message(res.msg, 1)
            } else {
              this.message(res.msg, 3)
            }
          })
        }
      })
    },
    clearId(type) {
      switch (type) {
        case 'wp':
          this.menuForm.repClassId = null
          break;
        case 'wf':
          this.menuForm.wfClassId = null
          break;
        case 'fn':
          this.menuForm.wmName = null
          break;
        default:
          break;
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.systemPage-wrapper {
  .content-background {
    display: flex;

    .left-tree>.title,
    .right-board>.title-wrapper>.title,
    .right-board>.roles-wrapper>.roles-top>.title {
      display: inline-block;
      font-weight: bold;
      font-size: 16px;
      padding: 0 12px;
      position: relative;
      color: var(--organization-tabs-text-color);

      &::before {
        content: '';
        display: block;
        width: 4px;
        height: 20px;
        background: rgba(83, 167, 255, 1);
        border-radius: 2px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .left-tree {
      width: 320px;
      margin-right: 12px;
      text-align: left;
      overflow: auto;

      .title {
        margin: 16px;
        text-align: left;
      }
    }

    .right-board {
      width: calc(100% - 332px);

      .title-wrapper {
        height: 52px;
        position: relative;
        border-bottom: 2px solid var(--organization-title-underline-color);
        margin: 0 16px;

        .title {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        .systemButtonConfirm {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .menuDetail {
        height: calc(100% - 206px);
        overflow: auto;

        .el-form {
          padding-top: 40px;
          padding-left: 90px;

          .el-form-item {
            padding-right: 90px;

            &.inline-row ::v-deep.el-form-item__content {
              .el-input {
                width: calc(100% - 48px);
              }

              i {
                float: right;
                cursor: pointer;
                color: rgba(64, 158, 255, 1);
                width: 40px;
                height: 32px;
                line-height: 32px;
                background: rgba(153, 153, 153, 0);
                border: 1px solid rgba(190, 190, 190, 1);
                border-radius: 4px;
                margin-left: 8px;
              }
            }
          }
        }
      }

      .roles-wrapper {
        width: 100%;
        padding: 0 16px;
        text-align: left;

        .roles-top {
          padding-bottom: 18px;
          border-bottom: 2px solid var(--organization-title-underline-color);
          height: 40px;

          .buttons-wrapper {
            display: inline-flex;
            float: right;

            span {
              margin-left: 10px;

              &:first-child {
                &::before {
                  content: '\e635';
                  color: rgba(122, 216, 162, 1);
                }

                &:hover {
                  &::before {
                    color: rgba(255, 255, 255, 1);
                  }
                }
              }
            }
          }
        }

        .roles-bottom {
          height: 114px;
          padding: 11px 0;
        }
      }
    }
  }

  ::v-deep.systemDialog.checkDialog {
    .systemInput {
      margin-bottom: 30px;
    }

    .el-checkbox-group .el-checkbox {
      margin-right: 20px;
      margin-bottom: 12px;
      text-align: left;
      width: 189px;
      height: 36px;
      line-height: 36px;
      background: var(--menuManage-checkbox-bgc);
      opacity: 0.9;
      border-radius: 6px;
      padding-left: 14px;
      float: left;
    }
  }

  ::v-deep.systemDialog.funcAppDialog {
    width: 800px;
    height: 300px;

    .systemButtonAdd {
      margin-bottom: 12px;
      float: right;
    }

    .el-table .cell .row {
      float: left;
      margin-right: 14px;
      cursor: pointer;

      .icon {
        margin-right: 5px;
      }
    }
  }

  ::v-deep.systemDialog.handleFuncAppDialog {
    .el-form .el-form-item.inline-row .el-form-item__content {
      .el-input {
        width: calc(100% - 48px);
      }

      i {
        float: right;
        cursor: pointer;
        color: rgba(64, 158, 255, 1);
        width: 40px;
        height: 32px;
        line-height: 32px;
        background: rgba(153, 153, 153, 0);
        border: 1px solid rgba(190, 190, 190, 1);
        border-radius: 4px;
        margin-left: 8px;
      }
    }
  }
}
</style>
